<!DOCTYPE html>
<html>
  <head>
    <title>爱迪梦|故事汇|首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="爱迪梦|故事汇">

    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">

    <style>
      .swiper-container {
        width: 100%;
      } 

      .swiper-container img {
        display: block;
        width: 100%;
      }
      .weui-loadmore{
        margin-top: 10px;
        margin-bottom: 80px;
      }
      .weui-panel__hd{
        font-size: 18px;
      }
      
    </style>
  </head>

  <body ontouchstart>
<!-- AD begin -->
          <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="../ad/ad-1.png" /></div>
              <div class="swiper-slide"><img src="../ad/ad-2.png" /></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
          </div>
<!-- AD end -->
<!-- searchbox begin -->
          <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" action="#">
              <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
              </div>
              <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
              </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
          </div>
<!-- searchbox end -->
<!-- 模块详细 begin -->
    <div class="page__bd">
      <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">推荐系列故事</div>
        <div id="list" class="weui-panel__bd">
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">标题一</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">标题二</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">标题一</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">标题二</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">标题一</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">标题二</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
        </div>
        <div id="my-weui-loadmore" class="weui-loadmore">
          <i class="weui-loading"></i>
          <span class="weui-loadmore__tips">正在加载</span>
        </div>
      </div>
    </div>
<!-- 模块详细 end -->


    <!-- ========滚动加载 子模块==begin======= -->
<div id="my-roll-load-sub" style="display:none">
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">XXX</h4>
              <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            </div>
          </a>
</div>
<!-- ========滚动加载 子模块==end======= -->
<script type="text/javascript" charset="utf-8" src="../lib/jquery-2.1.4.js"></script>
<script type="text/javascript" charset="utf-8" src="../lib/fastclick.js"></script>
<!--
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
-->
<script type="text/javascript" charset="utf-8" src="../js/jquery-weui.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/swiper.js"></script>
<script>
      //=======AD loop====begin====
      $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
      });
      //=======AD loop====end====
      //=======滚动加载====begin====
      var loading = false;
      $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        $("#list").append($("#my-roll-load-sub").children().clone());
        loading = false;
      });
      //=======滚动加载====end====
</script>
  </body>
</html>
